<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="timengList"
      border
      stripe
      style="width: 100%; font-family: 'Arial', sans-serif;"
    >
      <el-table-column
        label="ID"
        align="center"
        prop="timeId"
        width="180"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="status"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">未请假</span>
          <span v-if="scope.row.status === 1">全天假</span>
          <span v-else-if="scope.row.status === 2">上午假</span>
          <span v-else-if="scope.row.status === 3">下午假</span>
          <span v-else-if="scope.row.status === 4">待审核</span>
          <span v-else-if="scope.row.status === 5">通过</span>
          <span v-else-if="scope.row.status === 6">驳回</span>
        </template>
      </el-table-column>
      <el-table-column
        label="排班日期"
        align="center"
        prop="nowTime"
        width="280"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.nowTime, '{yyyy}-{mm}-{dd}') }}</span>
        </template>
      </el-table-column>


      <el-table-column label="上午班次" align="center" class="time-column">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1 || scope.row.status === 2">请假</span>
          <span v-else>{{ scope.row.forenoonStartTime }} -- {{ scope.row.forenoonEndTime }}</span>
        </template>
      </el-table-column>


      <el-table-column label="下午班次" align="center" class="time-column">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1 || scope.row.status === 3">请假</span>
          <span v-else>{{ scope.row.afternoonStatrTime }} -- {{ scope.row.afternoonEndTime }}</span>
        </template>
      </el-table-column>



      <el-table-column
        label="操作"
        align="center"
        class="operation-column"
        width="150"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0" type="text" icon="el-icon-edit" size="mini" @click="attendance(scope.row)">请假</el-button>
          <el-button v-if="scope.row.status === 2 || scope.row.status === 3" type="text" icon="el-icon-edit" size="mini" @click="attendance(scope.row)">更改假期</el-button>
          <el-button v-if="scope.row.status === 6 " type="text" icon="el-icon-edit" size="mini" @click="attendance(scope.row)">点击修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Form -->
    <el-dialog
      title="请假"
      :visible.sync="dialogFormVisible"
      v-dialog-drag-height="500"
      :width="dialogWidth"
      :height="dialogHeight"
    >
      <el-form :model="leave">
        <el-form-item>
          <el-radio v-model="leave.status" label="1">全天(09:00:00 -- 18:30:00)</el-radio>
          <el-radio v-model="leave.status" label="2">上午(09:00:00 -- 12:00:00)</el-radio>
          <el-radio v-model="leave.status" label="3">下午(14:00:00 -- 18:30:00)</el-radio>
        </el-form-item>
        <el-form-item label="请假原因" prop="reason">
          <quill-editor v-model="leave.reason" ref="myQuillEditor" :options="editorOption"></quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {findDoctorId, leave} from "@/api/appointment/timeng/timeng";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';


export default {
  name: "Timeng",
  components: {
    quillEditor
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 时间管理表格数据
      timengList: [],
      // 对话框的可见性
      dialogFormVisible: false,
      // 表单数据
      leave: {
        status: '',
        reason: '', // 存储请假原因
        doctorId: '',
        timeId:null,
        nowTime:'',
        type:''
      },
      // 对话框宽度
      dialogWidth: '850px',
      // 对话框高度
      dialogHeight: '600px',
      editorOption: {
        // 富文本编辑器的配置选项
        // 例如，你可以设置模块、主题等
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],               // 标题，键值对的形式；1、2 表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标，下标
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
            [{ 'direction': 'rtl' }],                      // 文本方向
            [{ 'size': ['small', false, 'large', 'huge' ] },  // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],          // 字体颜色，字体背景颜色
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean']                                  // 清除格式
            ]
          ]
        },
        theme: 'snow' // 主题，可选 'snow' 或 'bubble'
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 请假
    submitForm(){
      if (this.leave.status == null || this.leave.status==""){
        this.$message.error("请选择假时间")
        return;
      }
      if (this.leave.reason == null || this.leave.reason == ""){
        this.$message.error("请假原因不能为空")
        return;
      }
      this.leave.doctorId = this.$route.query.doctorId
      leave(this.leave).then(res=>{
        this.$message.success("请假成功")
        // 关闭对话款
        this.dialogFormVisible = false;
        // 调用列表
        this.getList()
      })
    },
    /** 查询时间管理列表 */
    getList() {
      findDoctorId(this.$route.query.doctorId).then((res) => {
        this.timengList = res.data;
      });
    },
    attendance(row) {
      // 处理请假操作，例如打开对话框
      this.leave.timeId = row.timeId
      this.leave.nowTime = row.nowTime
      this.dialogFormVisible = true;
    },
  },
};
</script>


<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 5px;
  font-family: 'Arial', sans-serif; /* 设置容器内的字体 */
}


.el-table {
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  font-size: 14px; /* 设置表格字体大小 */
}


.el-table::before {
  display: none;
}


.el-table th {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: bold;
  font-size: 16px; /* 设置表头字体大小 */
}


.el-table td {
  color: #606266;
  font-size: 14px; /* 设置单元格字体大小 */
}


.time-column {
  color: #409eff;
  font-weight: 500;
  font-size: 14px; /* 设置时间列字体大小 */
}


.operation-column {
  text-align: center;
  font-size: 14px; /* 设置操作列字体大小 */
}


.el-table.el-button {
  margin: 0 5px;
  border: none; /* 去掉按钮边框 */
  background-color: transparent; /* 按钮背景透明 */
  color: #409eff;
  cursor: pointer; /* 鼠标悬停时显示指针 */
  transition: color 0.3s ease; /* 颜色过渡效果 */
}


.el-table.el-button:hover {
  color: #66b1ff; /* 鼠标悬停时颜色变化 */
}


.el-table.el-button:focus,
.el-table.el-button:active {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}


/* 表头和单元格的内边距调整 */
.el-table th,
.el-table td {
  padding: 12px 8px;
}


/* 表格行的悬停效果 */
.el-table__row:hover {
  background-color: #f0f2f5;
}


/* 选中行的样式 */
.el-table__row--striped.current-row {
  background-color: #e6f7ff;
}


/* 表格底部的分页栏样式（如果有） */
.el-pagination {
  margin-top: 20px;
  text-align: center;
}


/* 分页栏按钮样式 */
.el-pagination button {
  border: none;
  background-color: transparent;
  color: #409eff;
  cursor: pointer;
  transition: color 0.3s ease;
}


.el-pagination button:hover {
  color: #66b1ff;
}


.el-pagination.el-pager li.active {
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
}


/* 对话框样式 */
.el-dialog {
  border-radius: 5px;
}


.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}


.el-dialog__body {
  padding: 20px;
}


.el-dialog__footer {
  padding: 10px 20px;
  border-top: 1px solid #e4e7ed;
}


.el-dialog__footer button {
  margin-right: 10px;
}


.el-form-item {
  margin-bottom: 15px;
}


.el-radio {
  margin-right: 15px;
}


/* 富文本编辑器样式 */
.quill-editor {
  width: 800px;
  height: 400px; /* 设置富文本编辑器的高度 */
}
</style>
